<template>
  <div>

    <div id="container" />

    <el-table v-loading="loading" :data="physicalList">
      <el-table-column label="物流ID" align="center" prop="physicalId" />
      <el-table-column label="物流单号" align="center" prop="physicalNum" />
      <el-table-column label="司机" align="center" prop="name" />
      <el-table-column label="运输状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0">未运输</el-tag>
          <el-tag v-if="scope.row.status == 1">运输中</el-tag>
          <el-tag v-if="scope.row.status == 2">运输完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="批次" align="center" prop="batchNum" />
      <el-table-column label="仓库名称" align="center" prop="warehouseName" />
      <el-table-column label="运输开始时间" align="center" prop="startTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="运输完成时间" align="center" prop="endTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>


  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {listByuser} from "@/api/system/physical";
export default {
  data(){
    return{
      physicalList: [],
      // 遮罩层
      loading: true,
      startName:'',
      endName:'',
      marker:null,
      polyline: null,
      speed: '1倍速',
      duration: 500,  // 轨迹回放时间
      percentage: 50,
      dialogTableVisible:false,
    }
  },
  mounted() {
    this.initAMap()
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "32e512569b65acfd37c6e7ea823a02f5",//安全密钥
      };
      AMapLoader.load({
        key: "4130e1bcae5b0d0e9722b6abb42d5f43", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.AutoComplete',"AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker',
          'AMap.CitySearch', 'AMap.Geolocation', 'AMap.InfoWindow'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
          });

        })
        .catch((e) => {
          console.log(e);
        });

    },
    //起始地和结束
    handleClick(val){
      this.startName=val.startName;
      this.endName=val.endName;
      this.goView();

    },

    goView() {
      // eslint-disable-next-line no-undef
      const driving = new AMap.Driving({
        map: this.map,
        // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
        // eslint-disable-next-line no-undef
        policy: AMap.DrivingPolicy.LEAST_TIME
      })
      //将城市范围划分在中国内
      const points = [
        { keyword: this.startName, city: '全国' },
        { keyword: this.endName, city: '全国' }
      ]

      driving.search(points, (status, result) => {
        // 未出错时，result即是对应的路线规划方案
        console.log('status=', status)
        console.log('result=', result)
      })

      // //运用小车图片以及起始地
      // this.marker = new AMap.Marker({
      //   position: [116.407387,39.904179],
      //   icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
      //   offset: new AMap.Pixel(-13, -26),
      // });
      // this.map.add(this.marker)
      //
      // // 绘制轨迹
      // this.polyline = new AMap.Polyline({
      //   path: [],
      //   showDir: true,
      //   strokeColor: "#28F",  //线颜色
      //   // strokeOpacity: 1,     //线透明度
      //   strokeWeight: 6,      //线宽
      //   // strokeStyle: "solid"  //线样式
      // });
      // this.map.add(this.polyline)
      //
      // // 走过的路径
      // this.passedPolyline = new AMap.Polyline({
      //   strokeColor: "#AF5",  //线颜色
      //   strokeWeight: 6,      //线宽
      // });
      // this.map.add(this.passedPolyline)
      //
      // // 监听marker移动
      // this.marker.on('moving', (e) => {
      //   console.log('marker动了', e)
      //   this.passedPolyline.setPath(e.passedPath); // 设置路径样式
      //   this.map.setCenter(e.target.getPosition(), true) // 设置地图中心点
      // });
      //
      // this.map.setFitView(); // 根据覆盖物自适应展示地图

    },

    getList(){
      listByuser().then(r=>{
        this.physicalList=r.data;
        this.loading=false;
      })
    },


  },
  created() {
    this.getList()
  }

};
</script>
<style scoped>
#container {
  width: 100%;
  height: 600px;
}
</style>
